<template>
  <transition name="slide">
    <div class="list" style="" id="aa">
      <van-nav-bar title="本科生课表" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
      <div class="itemWrap">
        <form action="/">
          <van-search class="searchbar"
            v-model="value"
            placeholder="搜索(班级号或老师姓名)"
            show-action
            @search="searchSchedule"
            @cancel="onCancel"
          />
        </form>
        <p class="jobtitle">请选择你想查询的班级课表</p>
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item class="vanCell" :name="0"  @click="showPicker(item1.key)">
            <div slot="title">{{item1.title}}
              <span class="choosed">{{choosed1}}</span>
            </div>
            <van-picker
              class="vanPicker"
              
              :title="item1.title"
              :columns="item1.columns"
              @change="onChange1"
              
              v-if="item1.sign"

              style="font-size:14px"
            />
            
          </van-collapse-item>

          <van-collapse-item class="vanCell" :name="1"  @click="showPicker(item2.key)">
            <div slot="title">{{item2.title}}
              <span class="choosed">{{choosed2}}</span>
            </div>
            <van-picker
              class="vanPicker"
              
              :title="item2.title"
              :columns="item2.columns"
              @change="onChange2"
            
              v-if="item1.sign"

              style="font-size:14px"
            />
            
          </van-collapse-item>

          <van-collapse-item class="vanCell" :name="2" >
            <div slot="title">{{item3.title}}
              <span class="choosed">{{choosed3}}</span>
            </div>
            <van-picker
              class="vanPicker"
              
              :title="item3.title"
              :columns="item3.columns"
              @change="onChange3"
              v-if="item1.sign"

              style="font-size:14px"
            />
            
          </van-collapse-item>
          
        </van-collapse>

        <van-circle
          class="circle"
          v-model="currentRate"
          color="#13ce66"
          fill="#fff"
          size="80px"
          layer-color="#eee"
          :text="text"
          :rate="rate"
          :speed="100"
          :clockwise="false"
          :stroke-width="60"
        />
      
        <van-button class="login" v-if="showBtn" :loading="buttonLoading"  size="normal" type="primary" text="正在查询" @click="getSchedule">查询课表</van-button>
        <router-view></router-view>
      </div>
      
    </div>
  </transition>
</template>
<script>
import Vue from "vue";
import store from "../../common/store";
import { Picker } from "vant";
import { Toast } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Tag } from "vant";
import { Circle } from "vant";
import { Button } from "vant";

Vue.use(Button);
Vue.use(Circle);
Vue.use(Tag);
Vue.use(Collapse).use(CollapseItem);
Vue.use(Picker);
export default {
  data() {
    return {
      item1: {
        key: 1,
        columns: [
          "未选择院系",
          "通信工程学院",
          "电子工程学院",
          "计算机学院",
          "机电工程学院",
          "经济管理学院",
          "人文学院",
          "软件学院",
          "微电子学院",
          "生命科学学院",
          "空间科学与技术学院",
          "物理与光电工程学院",
          "数学与统计学院",
          "先进材料与纳米技术学院",
          "外国语学院",
          "网络与信息安全学院"
        ],
        title: "院系选择",
        sign: true
      },
      item2: {
        key: 2,
        columns: [
          "未选择学年",
          "2016年下学期",
          "2017年上学期",
          "2017年下学期",
          "2018年上学期"
        ],
        title: "学年选择",
        sign: true,
        termMsg:[
          "",
          "2016b",
          "2017a",
          "2017b",
          "2018a"
        ]
      },
      item3: {
        key: 3,
        columns: [
          "未选择班级",
          "请先选择学院再来选择班级！"
        ],
        title: "班级选择",
        sign: true
      },
      value: "",
      activeName: "1",
      choosed1: "未选择院系",
      choosed2: "未选择学年",
      choosed3: "未选择班级",
      currentRate: 0,
      flag1: 0,
      flag2: 0,
      flag3: 0,
      buttonLoading: false,
      showBtn: false
    };
  },
  computed: {
    text() {
      return this.currentRate + "%";
    },
    rate() {
      let result = this.flag1 + this.flag2 + this.flag3;
      if (result == 99) {
        result = 100;
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
      return result;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login/mint-pull");
    },
    searchSchedule() {
      console.log(this.value);
      //搜索获得课表接口信息
      this.$apis.searchSchedule(this.value,store.state.accesskey).then(res => {
        console.log(res);
      });
    },
    onCancel() {
      Toast("取消");
    },
    onChange1(picker, value, index) {
      this.choosed1 = value;
      if (value != "未选择院系") {
        this.flag1 = 33;
      } else {
        this.flag1 = 0;
      }
      // Toast(`当前值：${value}`);

      //通过接口与学院动态获取班级信息接口
      this.$apis
        .getClass({
          academy: this.choosed1
        },store.state.accesskey)
        .then(res => {
          console.log(res);
          this.item3.columns = res.msg;
        });
    },
    onChange2(picker, value, index) {
      // console.log(value,index)
      // this.choosed[0] = getValues();
      this.choosed2 = value;
      if (value != "未选择学年") {
        this.flag2 = 33;
      } else {
        this.flag2 = 0;
      }
      // Toast(`当前值：${value}`);
    },
    onChange3(picker, value, index) {
      // console.log(value,index)
      // this.choosed[0] = getValues();
      this.choosed3 = value;
      if (value != "未选择班级") {
        this.flag3 = 33;
      } else {
        this.flag3 = 0;
      }
      // Toast(`当前值：${value}`);
    },
    showPicker(index) {
      // let a = item+'index'
      // console.log(a)
      // this.a.sign = true;
      // console.log(this.items[indexs].sign)
    },
    getSchedule() {
      this.buttonLoading = true;
      this.$router.push("/index/scheduleDetail/scheduleList")
      
      let msg = this.item2.columns.indexOf(this.choosed2)
      
      let termMsg = this.item2.termMsg[msg]
      store.commit('user_scheduleList', [this.choosed1,termMsg,this.choosed3]); 
    }
  }
};
</script>

<style lang="less" >
@import "../../assets/less/baseDetail.less";

.itemWrap{
  height: calc(~'100% - 46px');
  overflow: scroll;
}
.jobtitle {
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: rgb(68, 187, 0);
  line-height: 30px;
  margin: 10px auto;
}
.vanCell {
  width: 90%;
  margin: 0 auto;
}
.van-picker {
  color: blue;
  margin-top: -16px;
}
.choosed {
  width: 90%;
  font-size: 14px;
  color: rgb(51, 136, 255);
  margin-left: 28%;
}

.circle {
  margin: 30px 0;
  margin-left: calc(~"50% - 40px");
  padding-left: 20%;
  font-size: 12px;
}

.login {
  display: block;
  font-size: 18px;
  line-height: 45px;
  text-align: center;
  color: white;
  width: 30%;
  margin: 0px auto;
  border-radius: 8px;
}
</style>
